<style lang="postcss" scoped>
.home-container {
}
</style>
<template>
  <section class="home-container">
    <MasterPage title>
      <!-- <div slot="searchContent" class="search-content-slot">
        <Form :model="formItem" :label-width="80">
          <Row>
            <Col span="6">
              <FormItem label="工号">
                <Input v-model="formItem.workNo"></Input>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem label="姓名">
                <Input v-model="formItem.name"></Input>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>-->
      <div slot="search">
        <Button style="margin-right:5px;" type="primary" icon="md-add" @click="new1()">添加</Button>
        <!-- <Button
          style="margin-right:5px;"
          type="error"
          icon="md-remove"
          @click="removeSelection()"
        >删除</Button>-->
      </div>
      <!-- <div slot="btns">
        <Button type="info" icon="ios-search" @click="search()">查询</Button>
      </div>-->
      <div slot="paddingContent">
        <Table :columns="columns1" :data="data1"></Table>
        <Modal :title="title" v-model="modal1" class-name="vertical-center-modal" :closable="false">
          <Form ref="formValidate" :model="formData" :label-width="80" :rules="ruleValidate">
            <FormItem label="模块名称" prop="moduleName">
              <Input v-model="formData.moduleName"></Input>
            </FormItem>
            <FormItem label="路径">
              <Input v-model="formData.url"></Input>
            </FormItem>
            <FormItem label="所属模块">
              <Select v-model="formData.pid" :disabled="editdisable">
                <Option
                  v-for="item in moduleList"
                  :value="item.id"
                  :key="item.id"
                  :label="item.moduleName"
                ></Option>
              </Select>
            </FormItem>
          </Form>
          <div slot="footer">
            <Button type="text" size="large" @click="model1Closed()">取消</Button>
            <Button type="primary" size="large" @click="ok()">确定</Button>
          </div>
        </Modal>
      </div>
      <div slot="pager">
        <!-- <Page :total="data1.length"/> -->
        <!-- <Page
          :total="pageTotal"
          :current="pageNum"
          :page-size="pageSize"
          show-total
          show-sizer
          placement="top"
          @on-change="handlePage"
          @on-page-size-change="handlePageSize"
        />-->
      </div>
    </MasterPage>
  </section>
</template>
<script>
import MasterPage from '@/components/Master'
import { list, save, delete1, treeList } from '@/services/module'
import talbeExpend from './module-table-expend'
export default {
  components: {
    MasterPage
  },
  async mounted() {
    console.log("module")
    this.moduleList = await list()
    await this.refresh()
    console.log(this.data1)
  },
  methods: {
    remove(row) {
      if (row.children && row.children.length > 0) {
        this.$Modal.confirm({
          title: "警告",
          content: "该模块包含子模块,确认删除将同时删除子模块,相关角色将无法访问，是否确认!",
          onOk: () => {
            this.doRemove(row)
          }
        })
      } else {
        this.doRemove(row)
      }
    },
    async doRemove(row) {
      try {
        await delete1(row.id)
        this.$Message.info("操作成功");
        await this.refresh()
      } catch (err) {
        this.$Notice.error({ title: '操作失败', desc: err });
      }
    },
    edit(row) {
      this.formData = Object.assign({}, row)
      this.title = "编辑"
      this.editdisable = true
      this.modal1 = true
    },
    async new1() {
      this.title = "新增"
      this.editdisable = false
      this.modal1 = true
    },
    async ok() {
      let valid = await this.$refs.formValidate.validate()
      if (!valid) return
      //重复提示
      let old = this.moduleList.find(m => m.url == this.formData.url)
      if (!old || this.title == "编辑") {
        //无重复url,直接保存
        this.doSave()
      } else {
        //提示保存
        this.$Modal.confirm({
          title: "警告",
          content: "存在相同路径模块,继续保存将更新模块信息,是否确认!",
          onOk: () => {
            this.doSave()
          }
        })
      }
    },
    async doSave() {
      try {
        await save(this.formData)
        this.$Message.info("操作成功");
        this.model1Closed()
        await this.refresh()
      } catch (err) {
        this.$Notice.error({ title: '操作失败', desc: err });
      }
    },
    model1Closed() {
      this.modal1 = false
      this.formData = {}
      this.$refs.formValidate.resetFields()
    },
    async refresh() {
      this.moduleList = await list()
      let data = await treeList()
      this.setExpandEd(data)
      this.data1 = data
    },
    setExpandEd(pModule, level = 0) {
      pModule.forEach(pm => {
        pm._level = level
        if (pm.children && pm.children.length > 0) {
          pm._expanded = true
          pm._disableExpand = false
          this.setExpandEd(pm.children, pm._level + 1)
        } else {
          pm._disableExpand = true
        }
      })
    }
  },
  data() {
    return {
      moduleList: [],
      editdisable: false,
      modal1: false,
      title: "",
      formData: {},
      columns1: [
        {
          type: 'expand',
          width: 20,
          render: (h, params) => {
            return h(talbeExpend, {
              props: {
                data1: params.row.children,
                moduleList: this.moduleList
              },
              on: {
                "on-result-change": this.refresh
              }
            })
          }
        },
        {
          title: '模块名称',
          key: 'moduleName',
          render: (h, params) => {
            return h('div', [
              h('p', {
                style: { 'margin-left': params.row._level * 20 + 'px' }
              }, params.row.moduleName)
            ]);
          }
        },
        {
          title: '路径',
          key: 'url'
        },
        {
          title: '操作',
          // key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.edit(params.row)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.remove(params.row)
                  }
                }
              }, '删除'),
            ]);
          }
        }
      ],
      ruleValidate: {
        moduleName: [
          { required: true, message: '必填', trigger: 'blur' },
        ],
        url: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
      },
      data1: [
        {
          id: 1,
          moduleName: '教师管理',
          url: '/teacher',
        },
        {
          id: 2,
          moduleName: '班级管理',
          url: '/class',
        },
      ]
    }
  },
}
</script>
